<template>
  <div class="userList-box">
    <div class="userList-main">
      <div class="table-top" style="display: inline-block;text-align: right">
        <!-- 操作按钮 -->
        <div>
          <el-button type="cancel" @click="batchDelete">删除</el-button>
          <el-button type="primary" @click="saveUserInfo(null,1)">新建</el-button>
        </div>
      </div>
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading" style="width: 100%" :index="indexMethod">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="index" type="index" label="序号" width="75">
          </el-table-column>
          <el-table-column prop="title" label="标题" width="240">
          </el-table-column>
          <el-table-column prop="type" label="类型" width="240">
          </el-table-column>
          <el-table-column prop="text" label="内容">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150" align="center">
            <template slot-scope="scope">
              <div>
                <span style="color: #e63e3b;cursor: pointer" @click="deleteUser(scope.row.title)">删除</span>
                <span style="color: #e63e3b;cursor: pointer;margin-left: 15px" @click="saveUserInfo(scope.row,2)">编辑</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog :title="userTitle" :visible.sync="userTitleVisible" width="50%" top="5%">
      <el-form class :model="userData" :rules="rules" label-position="right" :inline="true" ref="userData" label-width="78px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题" prop="title">
              <el-input :disabled="userOperationType === 2" v-model="userData.title" placeholder="请输入标题" style="width: 360px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="source">
              <el-input :disabled="userOperationType === 2" v-model="userData.source" placeholder="请输入类型" style="width: 360px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容" prop="text">
              <el-input v-model="userData.text" placeholder="请输入内容" type="textarea" :rows="4" style="width: 700px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="cancel" @click="cancelBtn()">取消</el-button>
        <el-button type="primary" v-if="userOperationType == 1" @click="addUser('userData')">保存</el-button>
        <el-button type="primary" v-if="userOperationType == 2" @click="updateUser('userData')">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      tableData: [
        {
          id: 0,
          url: 'http://101.35.150.167/plotshow/img/plotshow01.jpg',
          title: '建党1921',
          type: '主线|建党',
          text: '1921年的上海，租界林立，局势剑拔弩张。13位来自五湖四海，平均年龄仅28岁的热血青年，从民族危亡的困境出发，将青春理想化作救国救民、寻求真理的信念，突破国际各股复杂势力的监控和追踪，在上海共聚，在陈独秀、李大钊的领导和推进下，1921年7月23日，中国共产党第一次全国代表大会在上海召开，宣告这个改变了亿万国民前途命运的政党正式成立。自此，中国历史进入了新篇章。'
        },
        {
          id: 0,
          url: 'http://101.35.150.167/plotshow/img/plotshow02.jpg',
          title: '建党伟业',
          type: '主线|建党',
          text: '1911年冬，孙中山从海外归来，于翌年1月1日就任临时大总统。与此同时毛泽东参加了光复新军。很快，袁世凯凭借强大的军事实力和在皇室中的威信，从孙中山手中取得了大元帅之身份，北洋政府成立。同年10月，中国国民党成立。1914年夏天第一次世界大战爆发，1915年袁世凯与日本定下密约二十一条并且更改国体，自封为中华帝国皇帝，自此走上了一条不归路。孙中山与蔡锷成立护国军，出师讨袁。很快袁世凯便在举国声讨中黯然死去了。之后又随着张勋复辟的失败，中国进入了军阀割据的混战局面。而毛泽东、李大钊、周恩来等人虽身处不同地方，但都在内心思索着救国救亡之路，命运的相会即将到来。',
          progress: '80%'
        },
        {
          id: 0,
          url: 'http://101.35.150.167/plotshow/img/plotshow03.jpg',
          title: '建国大业',
          type: '主线|建党',
          text: '以四十年代抗战胜利直至建国前夕这一波澜壮阔的时代为背景，以宏大的历史视野，正面再现共和国多党合作和政治协商制度从诞生到确立这一重大历史事件，反映了中国共产党和中国各民主党派在反对蒋介石国民党独裁统治的斗争中，和衷共济、团结奋斗、为建立多党合作和政治协商制度所经历的曲折艰辛直至取得最后胜利的光辉历程。',
          progress: '80%'
        },
        {
          id: 0,
          url: 'http://101.35.150.167/plotshow/img/plotshow04.jpg',
          title: '建军大业',
          type: '主线|建国',
          text: '1927年，北伐战争刚取得重大成果之际，国民党“右派”为夺权叛变革命，发动了疯狂的“清共”行动，短短数月，近31万进步同胞遭到残酷杀害，全国震惊，刚刚看到希望的中国即将再次陷入军阀混战和独裁专制的深渊。由于没有自己的武装力量，成立不足7年的中国共产党在国民党“右派”的疯',
          progress: '80%'
        },
        {
          id: 0,
          url: 'http://101.35.150.167/plotshow/img/plotshow05.jpg',
          title: '没有共产党就没有新中国',
          type: '主线|抗战',
          text: '一九四三年，日军占据了中国大半河山。中国抗日战争进入了最艰苦的时期。对此，中共中央和中共领导人毛泽东明确提出中国的希望在延安，并在《解放日报》上及时发表社论，宣传“没有共产党就没有中国”的理论。同时，中共中央指示，要将这一革命真理在解放区和抗日根据地积极宣传，做到人人皆知，家喻户晓。',
          progress: '80%'
        },
        {
          id: 0,
          url: 'http://101.35.150.167/plotshow/img/plotshow06.jpg',
          title: '八佰',
          type: '主线|抗战',
          text: '电影《八佰》由管虎导演，是亚洲首部全片使用IMAX摄影机拍摄的商业影片。',
          progress: '80%'
        },
        {
          id: 0,
          url: 'http://101.35.150.167/plotshow/img/plotshow07.jpg',
          title: '开天辟地',
          type: '主线|建党',
          text: '十月革命胜利的消息和巴黎和会上中国所遭受的屈辱同时传到了中国，印发了著名的“五四运动”。《新青年》主编陈独秀和一大批进步青年学生被反动当局逮捕，各地人士对此表示强烈抗议，纷纷对他们进行声援。当局不得不将他们释放。这一系列的时间，使李大钊、陈独秀、毛泽东等人开始在头脑中构想创建一个无产阶级的政党，他们又努力联系到共产国际，得到了他们的支持。1921年7月23日，李大钊、陈独秀、毛泽东等13位来自全国各地的代表在上海共聚，召开中国共产党第一次全国代表大会，后为躲避反动军警的抓捕，会议地点改到了浙江嘉兴南湖游船上，中国共产党第一个党章在会上通过，中国共产党正式宣布成立。',
          progress: '80%'
        },
        {
          id: 0,
          url: 'http://101.35.150.167/plotshow/img/plotshow08.jpg',
          title: '绝境逢生',
          type: '主线|抗战',
          text: '第二次世界大战期间，一艘美国潜艇遭到日本军舰伏击',
          progress: '80%'
        },
        {
          id: 0,
          url: 'http://101.35.150.167/plotshow/img/plotshow9.jpg',
          title: '血战台儿庄',
          type: '主线|抗战',
          text: '1938年，日寇占领民国首府南京之后，计划由南北两面包抄津浦路遇陇海路的枢纽——华东重镇徐州，以实现对华东的全面占领。',
          progress: '80%'
        },
        {
          id: 0,
          url: 'http://101.35.150.167/plotshow/img/plotshow10.jpg',
          title: '金陵十三钗',
          type: '主线|抗战',
          text: '1937年被日军侵占的中国南京，在一个教堂里互不相识的人们之间发生的感人故事。一个为救人而冒充神父的美国人、一群躲在教堂里的女学生、14个逃避战火的风尘女子以及殊死抵抗的军人和伤兵，他们在危难的时刻放下个人的生与死，去赴一场悲壮的死亡之约。',
          progress: '0%'
        },
        {
          id: 0,
          url: 'http://101.35.150.167/plotshow/img/plotshow11.jpg',
          title: '风声',
          type: '主线|抗战',
          text: '抗日战争时期，因一汪伪政府的高官被暗杀，引起日军高度重视，日军头领怀疑伪军情报机关内五名官员有一个是内奸“老鬼”，这个“老鬼”极可能与抗日组织有亲密关系。为了找出“老鬼”，日军和伪军对行政收发专员顾晓梦（周迅饰）、译电组组长李宁玉（李冰冰饰）、伪军剿匪大队长吴志国（张涵予饰）、剿匪司令的侍从官白小年（苏有朋饰）以及军机处处长金生火（英达饰）五人进行了审问，这过程经历了从心理战到酷刑。',
          progress: '0%'
        }
      ],

      loading: false,
      total: 0,
      userOperationType: 1,
      userTitle: '',
      userTitleVisible: false,
      userData: {},
      deleteIdList: [],
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        password2: [{ required: true, message: '请再次输入密码', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 新增或保存
    saveUserInfo(userData, type) {
      this.userOperationType = type
      //新增
      if (type === 1) {
        this.userData = {}
        this.userTitle = '新增'
      }
      // 保存
      else {
        this.userData = userData
        this.userTitle = '修改信息'
      }
      this.userTitleVisible = true
    },
    //取消修改或新增
    cancelBtn() {
      this.userTitleVisible = false
    },
    //更新信息
    updateUser(formName) {},
    //新增
    addUser(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.tableData.push(this.userData)
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.userTitleVisible = false
        }
      })
    },
    // 选中
    handleSelectionChange(selectList) {
      this.deleteIdList = []
      for (var i = 0; i < selectList.length; i++) {
        this.deleteIdList.push(selectList[i].id)
      }
    },
    // 批量删除
    batchDelete() {},
    /**
     * 自定义序号
     * @param index
     * @returns {*}
     */
    indexMethod(index) {
      return index
    },
    // 删除
    deleteUser(title) {
      this.tableData.forEach((item, index) => {
        if (item.title == title) {
          this.tableData.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      })
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.userList-box {
  width: 100%;
  height: 100%;
  .userList-main {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    flex-direction: column;
    .table-top {
      width: 100%;
      height: 70px;
      display: flex;
      justify-content: space-between;
      background: rgba(255, 255, 255, 1);
      align-items: center;
      box-sizing: border-box;
      padding: 12px;
      border-bottom: 1px solid #edeef0;
    }
    .page-box {
      background: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      padding: 12px;
      text-align: right;
    }
    .table-box {
      flex: 1;
      background: rgba(255, 255, 255, 1);
    }
  }
}
.form-input-width {
  width: 360px;
}
</style>